<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card>
          <div id="chart2" style="width: 100%;height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div ref="houseTypeCharts" style="width: 100%;height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="chart5" style="width: 100%;height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="chart1" style="width: 100%;height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="chart4" style="width: 100%;height: 400px;"></div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from "axios";
import moment from "moment"
import {safeInitChart} from "@/util/init-echart";

export default {
  name: "AdminData",
  data(){
    return {
    }
  },
  mounted() {

    //得到房屋类型数据并绘制饼图
    this.getHouseTypeData();

    //获取房源信息数据并绘制饼图
    this.getHouseInfoData();
    //this.initHouseInfoEcharts();

    //获取房源浏览量数据并绘制饼图
    this.getHouseViewData();
    //this.initHouseViewEcharts()

    //获取房源位置数据并绘制饼图
    this.getHouseWhereData();

    //获取用户访问量数据并绘制曲线图
    this.getSystemAccessData();
    //this.initSystemAccessEcharts();


    //this.getHouseViewData1()
  },
  methods:{

    //获取用户访问数据
    getSystemAccessData(){
      axios({
        url:"/data/loginStatistics",
        method: 'get',
      }).then(res=>{
        if (res.code === '200'){
          this.initSystemAccessEcharts(res.data)
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    //绘制用户访问量折线图
    initSystemAccessEcharts(data){
      data = data || [];
      /*let systemAccessDom = document.getElementById('chart2')
      let systemAccessChart = echarts.init(systemAccessDom)*/
      //let option;
      const option = {
        title: {
          text: '近七日系统用户访问量',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel:{
            interval: 0,
            rotate: 45,
            formatter: value =>moment(value).format('MM-DD')
          },
          data: [],
        },
        yAxis: {
          type: 'value',
          min:0,
          max: value =>Math.ceil(value.max),
          interval: 1,
          axisLabel: {
            formatter: function (value) {
              return Math.floor(value)
            }
          }
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true
          }
        ]
      };
      option.xAxis.data = data.map(item => item?.date);
      option.series[0].data = data.map(item => item?.count);
      // systemAccessChart.setOption(option)
      safeInitChart("chart2",option)
    },

    // 获取房屋类型数据
    getHouseTypeData(){
      axios({
        url:"http://localhost:8090/data/houseType",
        method: 'get',
        }).then(res=>{
          if (res.code === '200') {
            let value=[]
            let type=[]
            res.data.forEach(function(item, index){
              value.push(item.count)
              type.push(item.rent_type)
            })
            const houseTypeChart = echarts.init(this.$refs.houseTypeCharts)
            const option = {
              title: {
                text: '房屋类型统计',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'vertical',
                left: 'left'
              },
              series: [
                {
                  name: '房屋类型',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    {value: value[0], name: type[0]},
                    {value: value[1], name: type[1]},
                  ]
                }
              ]
            }
            houseTypeChart.setOption(option)
          }
      })
    },

    //获取房源信息数据
    getHouseInfoData(){
      axios({
        url:"/data/echarts/bie",
        method: 'get',
      }).then(res=>{
        if (res.code === '200'){
            this.initHouseInfoEcharts(res.data)
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    //获取房源信息饼图
    initHouseInfoEcharts(data){
     /* let houseInfoChartDom = document.getElementById('chart1')
      let houseInfoChart = echarts.init(houseInfoChartDom)*/
      //let option;
      const option = {
        title: {
          text: '房源信息数据',
          subtext:'统计维度：房源标题',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '房屋标题',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      //houseInfoChart.setOption(option);
      safeInitChart('chart1', option)
    },

    //获取房源浏览量数据
    getHouseViewData(){
      axios({
        url:"/data/echarts/bie2",
        method: 'get',
      }).then(res=>{
        if (res.code === '200'){
          //console.log("获取到的房源浏览量数据是：",res.data)
          this.initHouseViewEcharts(res.data)
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    //绘制用户浏览房源数据饼图
    initHouseViewEcharts(data){
     /* let houseViewDom = document.getElementById('chart4')
      let houseViewChart = echarts.init(houseViewDom)*/
      //let option;
      const option = {
        title: {
          text: '用户浏览房源数据',
          subtext:'统计维度：房源浏览量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '房屋标题',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      safeInitChart('chart4', option)
    },

    //获取房源分布数据
    getHouseWhereData(){
      axios({
        url:"/data/echarts/houseWhereCount",
        method: 'get',
      }).then(res=>{
        if (res.code === '200'){
          //console.log("房源分布数据",res.data)
          this.initHouseWhereEcharts(res.data)
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    //绘制房源分布饼图
    initHouseWhereEcharts(data){
      const option = {
        title: {
          text: '房源城市分布数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '房源分布',
            type: 'pie',
            radius: '50%',
            data: data
          }
        ]
       };
       safeInitChart('chart5', option)
    },


    getHouseViewData1(){
      axios({
        url:"/data/echarts/bie2",
        method: 'get',
      }).then(res=>{
        if (res.code === '200'){
          //console.log("获取到的房源浏览量数据是：",res.data)
          this.initHouseViewBar(res.data)
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    initHouseViewBar(data){
      console.log("获取到的房源浏览量数据是：",data)
      data = data || [];
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      };
      option.xAxis.data = data.map(item => item?.name);
      option.series[0].data = data.map(item => item?.value);
      safeInitChart('chart6', option)
    }
  }
}
</script>

<style scoped>

</style>